/*
 * @Author: Wilbur
 * @Date: 2019-02-21 13:51:51
 * @Last Modified by: ice
 * @Last Modified time: 2019-05-21 17:13:09
 */
<template>
    <div class="container resource-edit-wrap">
        <el-form
            v-if="init"
            ref="mainform"
            :model="formData"
            label-position="right"
            status-icon
            :rules="formRule"
            label-width="180px"
            :disabled="false">
            <!-- 资源编辑 -->
            <div class="form-unit">
                <div class="form-title">资源编辑</div>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    label-width="80px"
                    v-if="formData.resource_type.type_space_no_status == 1"
                    prop="resource_title"
                    label="资源编号:">
                    <span style="color:#999;margin-left:12px">{{ formData.resource_space_no }}</span>
                </el-form-item>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    label-width="80px"
                    prop="resource_title"
                    label="资源名称:">
                    <el-input
                        placeholder="必填"
                        v-model="formData.resource_title"
                        size="small"
                        class="task-input"/>
                    <span style="display:inline-block;color:#999;margin-left:12px"/>
                </el-form-item>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    label-width="80px"
                    prop="resource_people"
                    label="覆盖人数:">
                    <el-input
                        placeholder="必填"
                        v-model="formData.resource_people"
                        type="number"
                        size="small"
                        class="task-input"/>
                </el-form-item>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    label-width="80px"
                    v-if="formData.resource_type.type_num_status == 1"
                    label="资源数量:">
                    <el-input
                        placeholder="非必填"
                        v-model="formData.resource_num"
                        type="number"
                        size="small"
                        class="task-input"/>
                </el-form-item>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    label-width="80px"
                    v-if="formData.resource_type.type_link_status == 1"
                    label="资源链接:">
                    <el-input
                        placeholder="非必填"
                        v-model="formData.resource_link"
                        size="small"
                        class="task-input"/>
                </el-form-item>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    label-width="80px"
                    label="所属学校:">
                    <div>
                        <el-autocomplete
                            v-model="formData.school_name"
                            class="form-item"
                            size="small"
                            style="width: 435px;"
                            :fetch-suggestions="querySearchAsync"
                            placeholder="请输入学校名称或者输入全国"
                            :debounce="500"
                            :trigger-on-focus="false"
                            @select="handleSelect"/>
                    </div>

                    <div
                        style="margin-top: 10px;"
                        v-for="(item, index) in formData.resource_school_json"
                        :key="item.id">
                        <el-input
                            v-model="item.name"
                            class="form-item"
                            size="small"
                            style="width: 435px;"
                            readonly/>
                        <el-button @click="fnDelSchool(index)">删除</el-button>
                    </div>

                </el-form-item>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    label-width="80px"
                    v-if="formData.resource_type.type_link_status == 1"
                    label="链接地址:">
                    <el-input
                        placeholder="非必填"
                        v-model="formData.resource_link"
                        size="small"
                        class="task-input"/>
                </el-form-item>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    label-width="80px"
                    v-if="formData.resource_type.type_read_status == 1"
                    label="阅读量:">
                    <el-input
                        placeholder="非必填"
                        v-model="formData.resource_read_num"
                        type="number"
                        size="small"
                        class="task-input"/>
                </el-form-item>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    label-width="80px"
                    v-if="formData.resource_type.type_campus_status == 1"
                    label="校区:">
                    <el-input
                        placeholder="非必填"
                        v-model="formData.resource_campus"
                        size="small"
                        class="task-input"/>
                </el-form-item>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    label-width="80px"
                    v-if="formData.resource_type.type_position_status == 1"
                    label="地理位置:">
                    <el-input
                        placeholder="非必填"
                        v-model="formData.resource_position"
                        size="small"
                        class="task-input"/>
                </el-form-item>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    label-width="80px"
                    v-if="formData.resource_type.type_position_info_status == 1"
                    label="位置描述:">
                    <el-input
                        placeholder="非必填"
                        v-model="formData.resource_position_info"
                        size="small"
                        class="task-input"/>
                </el-form-item>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    label-width="80px"
                    v-if="formData.resource_type.type_attribute_status == 1"
                    label="属性:">
                    <el-input
                        placeholder="非必填"
                        v-model="formData.resource_attribute"
                        size="small"
                        class="task-input"/>
                </el-form-item>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    label-width="80px"
                    v-if="formData.resource_type.type_upv_status == 1"
                    label="UV数:">
                    <el-input
                        placeholder="非必填"
                        v-model="formData.resource_uv_num"
                        type="number"
                        size="small"
                        class="task-input"/>
                </el-form-item>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    label-width="80px"
                    v-if="formData.resource_type.type_upv_status == 1"
                    label="PV数:">
                    <el-input
                        placeholder="非必填"
                        v-model="formData.resource_pv_num"
                        type="number"
                        size="small"
                        class="task-input"/>
                </el-form-item>
            </div>
            <div class="form-unit">
                <div class="form-title">价格编辑</div>
                <!-- 多个价格, 单个价格同构多个价格 -->
                <div>
                    <el-form-item
                        v-for="(item, index) in formData.resource_price_list"
                        :key="item.key"
                        class="task-form-item"
                        size="small"
                        :prop="'resource_price_list.' + index + '.price'"
                        :rules="{
                            required: true, message: '价格不能为空', trigger: 'blur'
                        }"
                        :label="item.name">
                        <span class="more-price-title">成本价/元</span>
                        <el-input
                            placeholder="必填"
                            v-model="item.price"
                            size="small"
                            class="task-input more-price"/>
                        <br>
                        <span class="more-price-title">对外价(元)</span>
                        <el-input
                            placeholder="必填"
                            v-model="item.price_hire"
                            size="small"
                            class="task-input more-price"/>
                        <br>
                        <span class="more-price-title">服务费</span>
                        <el-select
                            class="task-select novalidate"
                            :value="fnGetServiceType(item)"
                            @input="(val) => { fnChangeServiceType(val, item) }">
                            <el-option
                                label="比例(%)"
                                :value="1"/>
                            <el-option
                                label="金额"
                                :value="2"/>
                        </el-select>
                        <el-input
                            v-if="fnGetServiceType(item) == 1"
                            v-model="item.service_rate"
                            size="small"
                            class="task-input more-price novalidate"/>
                        <el-input
                            v-else-if="fnGetServiceType(item) == 2"
                            v-model="item.service_money"
                            size="small"
                            class="task-input more-price novalidate"/>
                    </el-form-item>
                </div>
                <!-- 单个价格 -->
                <!-- <div v-if="formData.resource_type.type_price_status == 0">
                    <div
                        v-for="(item, index) in formData.resource_price_list"
                        :key="item.key">
                        <el-form-item
                            class="task-form-item"
                            size="small"
                            :prop="'resource_price_list.' + index + '.price'"
                            :rules="{
                                required: true, message: '价格不能为空', trigger: 'blur'
                            }"
                            label="成本价(元)">
                            <el-input
                                placeholder="必填"
                                v-model="item.price"
                                size="small"
                                class="task-input"/>
                        </el-form-item>
                        <el-form-item
                            class="task-form-item"
                            size="small"
                            :prop="'resource_price_list.' + index + '.price'"
                            :rules="{
                                required: true, message: '价格不能为空', trigger: 'blur'
                            }"
                            label="对外价(元)">
                            <el-input
                                placeholder="必填"
                                v-model="item.price_hire"
                                size="small"
                                class="task-input"/>
                        </el-form-item>
                    </div>
                </div> -->
            </div>
            <div class="form-unit">
                <div class="form-title">备注编辑</div>
                <el-form-item
                    class="task-form-item"
                    size="small"
                    label-width="80px"
                    prop="resource_remark"
                    label="备注:">
                    <el-input
                        placeholder="请填写备注（非必填）"
                        type="textarea"
                        rows="2"
                        v-model="formData.resource_remark"
                        size="small"
                        class="task-input"/>
                </el-form-item>
            </div>
            <div class="form-unit">
                <div class="operate-baar">
                    <el-button
                        type="danger"
                        size="medium"
                        @click="fnDelRes()">删除资源</el-button>
                    <el-button
                        size="medium"
                        type="primary"
                        @click="fnSubmit()">提交</el-button>
                </div>
            </div>
        </el-form>
    </div>
</template>

<script>
import ueditor from '@/components/common/ueditor.vue';
import regin from '@/assets/js/regin.min.js';
export default {
    components: { ueditor },
    data() {
        var checkResourcePrice = (rule, val, callback) => {
            let flag = true;

            for(let i = 0; i < this.formData.resource_price_list.length; i++) {
                if(this.formData.resource_price_list[i].price === '') {
                    flag = false;
                    break;
                }
            }
            if(!flag) {
                callback(new Error('请填价格'));
                return;
            }

            callback();
        };

        var checkResourceSchool = (rule, val, callback) => {
            // if(this.formData.resource_school_json == '' || this.formData.resource_school_json.length == 0) {
            //     callback(new Error('请选择资源所属学校'));
            //     return;
            // }

            callback();
        };

        return {
            authResult: {},
            breadcrumbList: [
                {
                    title: "广告系统",
                },
                {
                    title: "资源列表",
                    name: 'resourceList',
                },
                {
                    title: '编辑'
                }
            ],
            resourceNo: '',
            provence: [],
            formData: {
                resource_title: '',
                resource_people: '',
                resource_remark: '',
                resource_price_list: [],
                resource_type: {},
                resource_read_num: '',
                resource_uv_num: '',
                resource_pv_num: '',
                resource_space_no: '',
                resource_campus: '',
                resource_position: '',
                resource_position_info: '',
                resource_attribute: '',
                resource_school_json: [],
                school_name: '',
                resource_link: '',
                resource_num: ''
            },
            formRule: {
                resource_title: [
                    { required: true, message: '请输入资源名称', trigger: 'blur' }
                ],
                resource_people: [
                    { required: true, message: '请输入覆盖人数', trigger: 'blur' }
                ],
                resource_price: [
                    { validator: checkResourcePrice, trigger: 'blur' }
                ],
                resource_school_json: [
                    { validator: checkResourceSchool, trigger: 'blur' }
                ]
            },
            submitting: false,
            init: false,

            baseUrl: '',
            sessionTicket: localStorage.getItem('sessionTicket'),
            escape: escape,
            resouceList: [],
            selectedSchool: ''
        };
    },
    created() {
        this.authResult = this.$route.meta.authResult;
        this.$store.commit('SET_HEADER', this.breadcrumbList);

        this.resourceNo = this.$route.query.resource_no ? this.$route.query.resource_no : '';

        if (!this.resourceNo) {
            this.init = true;
        }else{
            this.fnGetResourceInfo();
        }
    },
    methods: {
        fnDelSchool(index) {
            this.formData.resource_school_json.splice(index, 1);
        },
        handleSelect(item) {
            this.selectedSchool = item;
            console.log(this.selectedSchool);
            this.fnAddSchool();
        },
        querySearchAsync(queryString, cb) {
            clearTimeout(this.timeout);

            this.timeout = setTimeout(() => {
                this.fnGetSchool(queryString, (list) => {
                    let temp = [];

                    for(let i = 0; i < list.length; i++) {
                        temp.push({
                            id: list[i].id,
                            value: list[i].name
                        });
                    }
                    cb(temp);
                });
            }, 0);
        },
        fnGetSchool(keyword, cb) {
            this.$post('/wei4/region%5Cschool_suggest', {
                keyword: keyword,
                size: 10
            }, resp => {
                if(resp.code == 1){
                    cb(resp.data.list);
                }else{
                    this.$message({
                        type: 'warning',
                        message: resp.msg
                    });
                }
            });
        },
        fnAddSchool() {
            if(this.selectedSchool == '') {
                console.log(1);
                return;
            }
            console.log(this.formData.resource_school_json, '===');
            if(this.formData.resource_school_json.length == 0) {
                console.log(2);
                this.formData.resource_school_json.push({
                    id: this.selectedSchool.id,
                    name: this.selectedSchool.value
                });
            }else{
                console.log(3);
                let flag = false;

                for(let i = 0; i < this.formData.resource_school_json.length; i++) {
                    if(this.formData.resource_school_json[i].id == this.selectedSchool.id) {
                        flag = true;
                    }
                }

                if(!flag) {
                    console.log(4);
                    this.formData.resource_school_json.push({
                        id: this.selectedSchool.id,
                        name: this.selectedSchool.value
                    });
                }
            }
            console.log(5);
            this.formData.school_name = '';
        },
        fnDelRes() {
            this.$confirm('确定删除“' + this.formData.resource_title + '”吗？', '提示', {
                confirmButtonText: '确定',
                cancelButtonText: '取消',
                type: 'warning'
            }).then(() => {
                this.$post('/wei4/resource%5Cdelete', {
                    resource_no: this.resourceNo
                }, resp => {
                    if(resp.code == 1){
                        this.$message({
                            type: 'success',
                            message: '删除成功!'
                        });
                        setTimeout(()=> {
                            this.$router.push({
                                name: 'resourceList'
                            });
                        }, 1000);
                    }else{
                        this.$message({
                            type: 'warning',
                            message: resp.msg
                        });
                    }
                });
            }).catch(() => {
            });
        },
        fnInitTimeNow() {
            var timestamp=new Date().getTime();

            return timestamp;
        },
        fnGetResourceInfo() {
            this.$post('/wei4/resource%5Cget', {
                resource_no: this.resourceNo
            }, resp => {
                if(resp.code == 1){
                    this.formData = {
                        ...resp.data,
                        resource_school_json: resp.data.resource_school_list
                    };
                    this.init = true;
                }else{
                    this.$message({
                        type: 'warning',
                        message: resp.msg
                    });
                }
            });
        },
        fnGetResourceSimpleList() {
            this.$post('/wei4/resource_type%5Cget_simple_list', {}, resp => {
                if(resp.code == 1){
                    this.resouceList = resp.data.list;
                }else{
                    this.$message({
                        type: 'warning',
                        message: resp.msg
                    });
                }
            });
        },
        fnSubmit(){
            if(this.submitting){
                return ;
            }
            this.$refs.mainform.validate(valid => {
                if(valid){
                    this.submitting = true;

                    let data = {
                        resource_title: this.formData.resource_title,
                        resource_people: this.formData.resource_people,
                        resource_remark: this.formData.resource_remark,
                        resource_price: this.formData.resource_price,
                        resource_price_json: JSON.stringify(this.formData.resource_price_list),
                        resource_read_num:  this.formData.resource_read_num,
                        resource_uv_num:  this.formData.resource_uv_num,
                        resource_pv_num:  this.formData.resource_pv_num,
                        resource_space_no:  this.formData.resource_space_no,
                        resource_campus:  this.formData.resource_campus,
                        resource_position:  this.formData.resource_position,
                        resource_position_info:  this.formData.resource_position_info,
                        resource_attribute:  this.formData.resource_attribute,
                        resource_school_json: JSON.stringify(this.formData.resource_school_json),
                        resource_num: this.formData.resource_num,
                        resource_link: this.formData.resource_link
                    };

                    if(this.resourceNo){
                        data.resource_no = this.resourceNo;

                        this.$post('/wei4/resource%5Csave', data, resp => {
                            if(resp.code == 1){
                                this.$message({
                                    type: 'success',
                                    center: true,
                                    message: '修改成功'
                                });
                            }else{
                                this.$message({
                                    type: 'warning',
                                    center: true,
                                    message: resp.msg
                                });
                            }
                            this.submitting = false;
                        });
                    }else{
                        console.log('none resource_no');
                    }

                }
            });
        },
        /** 数组中删除某个元素 */
        fndeleteItem(list, index, bind) {
            list.splice(index, 1);
            this[bind] = list.length;
        },
        fnReset(){
            this.$refs.mainform.resetFields();
        },
        fnGetServiceType(item){

            console.log(item);
            if(item.serviceType == 1 || item.service_rate){
                return 1;
            }else if(item.serviceType == 2 || item.service_money){
                return 2;
            }
            return '';
        },
        fnChangeServiceType(val, item){
            console.log(val, item);
            if(val == 1){
                this.$set(item, 'serviceType', 1);
                this.$set(item, 'service_money', 0);
            }else if(val == 2){
                this.$set(item, 'serviceType', 2);
                this.$set(item, 'service_rate', 0);
            }
        }
    },
};
</script>

<style lang="less" scoped>
    .margin-top{
        margin-top: 15px;
    }
    .resource-edit-wrap {
      background: #fff;
      margin: 15px;
      margin-bottom: 0;
      padding: 30px;
      overflow: auto;
    }
    .form-unit {
      margin-bottom: 40px;
    }
    .form-title {
      font-size: 16px;
      font-weight: 600;
      color: rgba(0, 0, 0, 0.85);
      line-height: 18px;
      padding: 0 10px;
      border-left: 2px solid #1890ff;
      margin-bottom: 20px;
    }
    .task-input {
      width: 435px !important;

    }
    .task-select{
        width: 95px !important;
    }
    .more-price-title{
        display: inline-block;
        color: #606266;
        width: 80px;
        text-align: right;
    }
    .more-price{
        width: 200px!important;
        margin-right: 20px;
    }
    .money-line{
        width: 35px;
        text-align: center;
    }
    .money-wrap{
        display: inline-block;
        width: 200px;
    }
    .money-input{
        width: 200px!important;
    }
    .task-intro-input {
      width: 750px;
    }
    .table-inner-input {
      outline: none;
      line-height: 20px;
      font-size: 14px;
      width: 100%;
      background: transparent;
      text-align: center;
      cursor: pointer;
    }
    input::-webkit-outer-spin-button,
    input::-webkit-inner-spin-button {
      -webkit-appearance: none;
    }
    input[type="number"] {
      -moz-appearance: textfield;
    }
    .input-width-delete {
      margin-top: 15px;
      font-size: 0;
      .task-input{
          margin-right: 10px;
      }
    }

    .operate-baar {
      width: 100%;
      text-align: center;
      margin-top: 168px;
    }
    .preview-image {
      width: 120px;
      height: 120px;
      background-position: center;
      background-size: contain;
      background-repeat: no-repeat;
    }

    .pic-width-delete {
      margin-top: 15px;
      float: left;
      margin-right:60px;
      display: inline-block;
      width: 500px;
      display: flex;
      justify-content: flex-start;
      align-items: flex-start;
      .pic-unit {
        flex: 1;
        margin-right: 10px;
        display: flex;
        justify-content: flex-start;
        align-items: flex-start;
        padding: 15px;
        border-radius: 4px;
        border: 1px solid rgba(217, 217, 217, 1);
        &-index {
          width: 28px;
          height: 28px;
          background: rgba(243, 250, 255, 1);
          border: 1px solid rgba(24, 144, 255, 1);
          margin-right: 15px;
          border-radius: 28px;
          text-align: center;
          line-height: 28px;
          color: rgba(24, 144, 255, 1);
        }
        &-detail{
            flex: 1;
        }
        &-desc{
            width:100%;
        }
        &-textarea{
            resize: none;
            width: 100%;
            height: 44px;
            line-height: 20px;
            border: 0;
            outline: 0;
        }
        .pic-value {
          width:100%;
          height: 215px;
          background-position: center;
          background-size: contain;
          background-repeat: no-repeat;
          background-color: #F6F6F6;
          position: relative;
          .loading{
              width:100%;
              height: 100%;
              line-height: 215px;
              background: rgba(0,0,0,.3);
              transition: opacity .3s ease-in-out;
          }
          .tip{
              font-size: 14px;
              color: #fff;
              line-height: 215px;
              width: 100%;
              height:100%;
              background: rgba(0,0,0,.5);
              position: absolute;
              left: 0;
              top: 0;
              opacity: 0;
              transition: opacity .3s ease-in-out;
          }
          &:hover{
              .loading{
                  opacity: 0;
              }
              .tip{
                  opacity: 1;
              }
          }
        }
        .pic-empty-container{
            display: flex;
            width: 100%;
            height: 100%;
            flex-direction: column;
            justify-content: center;
            align-items: center;
        }
        .pic-empty-plus{
            font-size:24px;
            width: 24px;
            line-height: 24px !important;
            color: rgba(0,0,0,.45);
        }
        .pic-empty-desc{
            font-size:14px;
            color:rgba(0,0,0,0.65);
            line-height:22px;
        }
      }
    }
    .upload-list{
        margin-top:10px;
    }
    .editor-wrap{
        position: relative;
    }
    .uploaded-image{
        width: 360px;
        height: 180px;
        background-size: 100%;
        background-position: center center;
        background-repeat: no-repeat;
        &:hover{
            .icon-delete{
                display: inline-block;
            }
        }
        .icon-delete{
            margin-top: 90px;
            transform: translateY(-50%);
            display: none;
        }
    }
</style>
<style lang="less">
    .avatar-uploader-customer{
        display: inline-block;
        .el-upload {
            border: 1px dashed #d9d9d9;
            border-radius: 6px;
            cursor: pointer;
            position: relative;
            overflow: hidden;
        }
        .el-upload:hover {
            border-color: #409EFF;
        }
        .avatar-uploader-icon {
            font-size: 28px;
            color: #8c939d;
            width: 100px;
            height: 100px;
            line-height: 100px;
            text-align: center;
        }
        .avatar {
            width: 100px;
            height: 100px;
            display: block;
        }
    }
    .provence-list{
        .el-checkbox {
            margin-left: 0;
            margin-right: 30px;
        }
    }
    .novalidate{
        .el-input__validateIcon{
            display: none;
        }
    }
</style>
